<template>
    <div class="easyd-weixin-Box">

        <div class="app_page_box" :style="$route.query.type == 'shenhe' ? 'bottom:50px' : ''">
            <div class="app_page">

                <div class="objection_info app_box_content_list app_list_box MARGIN_BOTTOM_10">
                    <div class="app_box_flex">
                        <div class="app_box_content_left">
                            <img src="../../../../dist/static/images/shangpin2.jpg"/>
                            <span>{{feedbackDetail.sq_nickname}}</span>
                        </div>
                        <div class="app_box_content_right">
                            <span class="T4" v-if="feedbackDetail.sq_status>0" style="color: #999999">已处理</span>
                            <span class="T4" v-else style="color: #3aff56">待解决</span>
                        </div>
                    </div>
                    <div class="">
                        <span class="C4">反馈描述:</span>
                        <div class="MARGIN_BOTTOM_10">
                            {{feedbackDetail.sq_content}}
                        </div>
                        <div class="app_box_flex">
                            <div class="app_box_content_left">
                                <span class="T3" style="color: #fbd415;">{{feedbackTypeArr[feedbackDetail.sq_type]}}</span>
                            </div>
                            <div class="app_box_content_right">
                                <span class="C4 T4">反馈时间：{{$common.getTimes(feedbackDetail.sq_create_time,'cn')}}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content_area app_box_content_list app_list_box MARGIN_BOTTOM_10" v-if="feedbackDetail.sq_reply">
                    <span class="C4">回复反馈：</span>
                    <div class="add_box" v-for="(item,index) in feedbackDetail.new_sq_reply">
                        <div class="add_img" v-if="item.type == '1'">
                            <img :src="item.txt"/>
                        </div>
                        <div class="add_txt" v-else-if="item.type == '0'" v-html="item.txt"></div>
                        <div class="add_video" v-else-if="item.type == '3'">
                            <video width="" height="">
                                <source src="myvideo.mp4" type="video/mp4"></source>
                                <source src="myvideo.ogv" type="video/ogg"></source>
                                <source src="myvideo.webm" type="video/webm"></source>
                                <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                                    <param name="movie" value="myvideo.swf"/>
                                    <param name="flashvars" value="autostart=true&amp;file=myvideo.swf"/>
                                </object>
                                当前浏览器不支持 video直接播放，点击这里下载视频：
                                <a href="myvideo.webm">下载视频</a>
                            </video>
                        </div>
                    </div>

                    <div class="app_box_flex">
                        <div class="app_box_content_left">
                            <span class="T3 C4">回复人：<span class="C1">{{feedbackDetail.sq_reply_nickname}}</span></span>
                        </div>
                        <div class="app_box_content_right">
                            <span class="C4 T4">回复时间：{{$common.getTimes(feedbackDetail.sq_reply_time,'cn')}}</span>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        
        <div class="app_bottom_box" v-if="$route.query.type == 'shenhe'">
            <div class="app_bottom_box_left" @click="audit('3')">拒绝</div>
            <div class="app_bottom_box_right" @click="audit('2')">同意</div>
        </div>

    </div>
</template>

<script>
    import {mapState, mapMutations} from "vuex";

    export default {

        data() {
            return {
				feedbackTypeArr: ['行业知识', '产品知识',  '销售技巧'], //反馈类型
            };
        },
        computed: {
            ...mapState({
                feedbackDetail: state => state.LookObjectionModule.feedbackDetail,
            })
        },
        mounted() {
            this.initData();
        },
        methods: {

            //  ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),
            initData() {

                this.$easyUtil.startLoading(this)
                this.$http.getHttp(
                    this.$API.feedbackDetails + "/sq_id/" + this.$route.query.sq_id,
                    rs => {

                        console.log(rs)
                        rs.feedbackInfo[0].new_sq_reply = JSON.parse(rs.feedbackInfo[0].sq_reply);
                        this.$store.commit("LookObjectionModule/updateFeedbackDetail", rs.feedbackInfo[0]);

                        this.$easyUtil.endLoading(this)

                    }
                );
            },
            audit(type){
            	console.log(type)
            	
				var params = {
					update_where: 'sq_id',
					sq_id: this.$route.query.sq_id,
					sq_apply_knowledge_status : type,
				}

				console.log(params);
				this.$easyUtil.startLoading(this)
				this.$http.postHttp(this.$API.updateSalesQuestion, params, (rs) => {

					this.$easyUtil.endLoading(this)
					this.$easyUtil.successToast(this, '审核成功');
					history.go(-1);

				})
            }
        }
    };
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
    .objection_info .app_box_content_left img {
        float: left;
        width: 30px;
        height: 30px;
        object-fit: cover;
        border-radius: 100px;
        margin-right: 10px;
    }

    .content_area {
        padding: 10px;
    }

    .content_area .add_box {
        position: relative;
    }

    .content_area .add_box .add_img {
        /*height: 250px;*/
        margin-bottom: 10px;
        /*border: 1px dotted #FBD415;*/
        /*padding: 10px;*/
        position: relative;
    }

    .content_area .add_box .add_img img {
        width: 100%;
        /*height: 100%;*/
        object-fit: cover;
    }

    .content_area .add_box .add_img span {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 250px;
        text-align: center;
    }

    .content_area .add_box .add_txt {
        margin-bottom: 10px;
        /*border: 1px dotted #FBD415;*/
        /*padding: 10px;*/
    }

    .content_area .add_box .add_txt textarea {
        width: 100%;
        border: 0;
    }

    .content_area .add_box .add_video {
        margin-bottom: 10px;
        border: 1px dotted #FBD415;
        padding: 10px;
    }

    .content_area .add_box .add_video video {
        width: 100%;
    }

    .content_area .add_box i {
        position: absolute;
        top: -10px;
        right: -10px;
        color: red;
        font-size: x-large;
    }

    .content_area .content_area_info {
        text-align: center;
        padding: 50px;
    }

    .content_area .content_area_info span {
        font-size: x-large;
        padding-right: 5px;
    }

    .content_area .content_area_btn {
    }

    .content_area .content_area_btn .app_box_flex_1 {
        text-align: center;
        background: #d6d6d6;
        padding: 10px 5px;
        margin-right: 5px;
    }

    .content_area .content_area_btn .app_box_flex_1:last-child {
        margin-right: 0px;
    }

    .content_area .content_area_btn .app_box_flex_1 span {
        font-size: x-large;
    }

    .content_area .content_area_btn .app_box_flex_1 p {
        line-height: initial;
    }
</style>